<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频管理</title>
  <link rel="stylesheet" href="/assets/css/layout.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/css/mdui.min.css">
</head>
<body class="mdui-theme-layout-dark mdui-theme-primary-grey mdui-theme-accent-blue
              mdui-bottom-nav-fixed mdui-appbar-with-toolbar mdui-drawer-body-left">
  <div class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
      <a href="/" class="mdui-typo-headline">FreeHLS</a>
      <a href="javascript:;" class="mdui-typo-title">视频管理</a>
      <div class="mdui-toolbar-spacer"></div>
      <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
    </div>
  </div>

  <div class="mdui-drawer">
    <ul class="mdui-list">
      <li class="mdui-list-item mdui-ripple mdui-list-item-active">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">ondemand_video</i>
        <a class="mdui-list-item-content" href="/videos">视频管理</a>
      </li>
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">device_hub</i>
        <a class="mdui-list-item-content" href="/tags">标签管理</a>
      </li>
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-pink">cloud_upload</i>
        <a class="mdui-list-item-content" href="/offline">离线切片</a>
      </li>
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">send</i>
        <a class="mdui-list-item-content" href="/video">发布视频</a>
      </li>
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-yellow-200">lock</i>
        <a class="mdui-list-item-content" href="/login">退出登录</a>
      </li>
    </ul>
  </div>

  <div class="mdui-container-fluid">
    <div class="situation mdui-row mdui-m-y-3">
      <div class="mdui-col-xs-10 mdui-col-offset-xs-1">
        <h1 class="mdui-text-color-theme">视频列表</h1>
        <div class="mdui-table-fluid">
          <table class="mdui-table mdui-table-hoverable" pagination="GET:paginate">
            <thead>
              <tr>
                <th width="50">ID</th>
                <th width="300">标题</th>
                <th width="100">状态</th>
                <th width="200">标签</th>
                <th width="160">发布时间</th>
                <th width="130">操作</th>
              </tr>
            </thead>
            <tbody class="paginate-container">
            </tbody>
          </table>
          <div class="paginate-loading mdui-p-y-3 mdui-text-center mdui-text-color-theme-700">数据加载中……</div>
          <div class="paginator mdui-p-y-2 mdui-p-x-3 mdui-text-right mdui-text-color-theme-500"></div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="/assets/js/utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mdui@0.4.3/dist/js/mdui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
var SECRET = '{{ SECRET }}',
    VERSION = '{{ VERSION }}';

var refresh = pagination($('table'), function (videos) {
  var html = '';
  for (var i=0; i<videos.length; i++) {
      html
        += '<tr>'
        +  '  <td>' + videos[i].id + '</td>'
        +  '  <td>'
        +  '    <a href="/play/' + videos[i].slug + '" target="_blank" class="mdui-text-color-theme-100">' + videos[i].title + '</a>'
        +  '  </td>'
        +  '  <td>' + ['已发布','队列中','处理中','发布失败'][videos[i].status] + '</td>'
        +  '  <td>' + videos[i].tags + '</td>'
        +  '  <td>' + dateformat(videos[i].created_at) + '</td>'
        +  '  <td>'
        +  '    <a href="/video/' + videos[i].id + '" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">edit</i></a>'
        +  '    <a onclick="removeVideo(' + videos[i].id + ')" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">delete</i></a>'
        +  '  </td>'
        +  '</tr>';
    }

    return html;
});

function removeVideo(video_id) {
  mdui.confirm('确定要移除此视频吗？', function () {
    api('POST', 'video/' + video_id, {remove: 1}, function () {
      refresh();
      snackbar('移除成功');
    });
  });
}
</script>
</html>